<template>
  <div class="app">
    <top-bar></top-bar>
    <div class="head_pic">
      <span class="content1">省省省！！！<br/>停车场超值优惠</span>
      <span class="content2">满1小时，减50<br/>满2小时，减150<br/>满5小时，送500<br/>抢枪抢！！</span>
      <button class="know_btn">点击了解</button>
    </div>
    <div class="down_icon">
      <img src="../assets/index/down.png" style="width: 50px;">
    </div>
    <div class="oparete_area">
      <div class="box" @click="toEnterPark">
        <img src="../assets/index/enterPark.png" class="box_icon">
        <span>入停车场</span>
      </div>
      <div class="box"  @click="toOutPark">
        <img src="../assets/index/outPark.png" class="box_icon">
        <span>出停车场</span>
      </div>
    </div>
    <div class="why_area">
      <div class="why_left">
        <span class="why_left_title">选择我们的理由</span>
        <p style="margin-top: 35px;color: #0c0c0c;width: 580px">
          宽敞的停车位,容纳各种类型的车辆。设残疾人停车位,方便特殊人群使用。</p>
        <p style="margin-top: 35px;color: #0c0c0c; width: 620px">
          安全保障,先进的监控设备,24小时全方位监控。专业的安保人员,随时巡逻,确保车辆安全</p>
      </div>
      <div class="why_right">
        <div class="why_right_img">
          <img src="https://img1.baidu.com/it/u=3527243512,25503551&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400">
          <img src="https://img95.699pic.com/xsj/08/v9/so.jpg%21/fh/300">
        </div>
        <div class="why_right_img">
          <img src="https://static.jisutui.vip/data/upload/2020/03/bd1c337bfalhkwpv.png">
          <img src="https://img1.baidu.com/it/u=2175473741,1895155200&fm=253&fmt=auto&app=138&f=JPEG?w=793&h=500">
        </div>
      </div>
    </div>
    <div style="height: 100px"></div>
  </div>
</template>
<script>
import topBar from "../components/topBar.vue";

export default {

  components: {
    topBar
  },
  data() {
    return {
      headImg: '',
    }
  },
  methods: {
    toEnterPark() {
      this.$router.push({
        path: '/enterPark'
      })
    },
    toOutPark(){
      this.$router.push({
        path: '/outPark'
      })
    }
  }
}
</script>
<style scoped>


.head_pic {
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 60vh;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-image: url('https://demosc.chinaz.net/Files/DownLoad/moban/202206/moban6661/images/slider-bg.jpg');
  background-size: cover;
  align-items: center;
  color: #fff
}

.head_pic h1::after {
  content: none;
}

.content1 {
  font-weight: bold;
  margin-bottom: 25px;
  font-size: 2.5rem;
  letter-spacing: 5px;
}

.content2 {
  font-size: 1.3rem;
  line-height: 3rem;
}

span {
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

.know_btn {
  display: inline-block;
  padding: 10px 35px;
  background-color: #fe4801;
  color: #ffffff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 1px solid transparent;
  margin: 35px 0 50px 0;
  text-transform: uppercase;
  width: 200px;
  cursor: pointer;
}

.know_btn:hover {
  background-color: #d73c03;
}

.oparete_area {
  background-color: #fe4801;
  color: #ffffff;
  text-align: center;
  height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.down_icon {
  margin: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: moveDown 1.5s infinite;
}

@keyframes moveDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

.box_icon {
  width: 80px;
  border: #fff 2px dashed;
  border-radius: 50%;
  padding: 15px;
  margin-bottom: 20px;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 250px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.box:hover {
  opacity: .8;
}

.why_area {
  display: flex;
  justify-content: center;
  margin-top: 130px;
}

.why_left {
  margin-right: 100px;
  display: flex;
  flex-direction: column;
}

.why_left_title {
  margin-bottom: 50px;
  font-size: 2.5rem;
  position: relative;
  font-weight: bold;
  color: #022f4a;
}

.why_right_img img {
  width: 300px;
  height: 200px;
  margin: 5px;
}
</style>
